<!-- 模板 -->
<template>
  <!-- 流程定义表单容器 -->
  <a-form ref="formRef" :model="formData" layout="vertical">
    <!-- 流程ID表单项 -->
    <a-form-item label="流程标识" name="code" :rules="[{ required: true }]">
      <!-- 禁用状态的流程ID输入框 -->
      <a-input
        disabled
        allowClear
        placeholder="请输入"
        v-model:value.trim="formData.code"
      />
    </a-form-item>

    <!-- 流程名称表单项 -->
    <a-form-item label="流程名称" name="name" :rules="[{ required: true }]">
      <!-- 流程名称输入框，自动去除首尾空格 -->
      <a-input
        allowClear
        placeholder="请输入"
        v-model:value.trim="formData.name"
      />
    </a-form-item>
    <!-- 流程名称表单项 :rules="[{ required: true }]" -->
    <a-form-item label="业务类型" name="receiptType" :rules="[{ required: true }]">
      <a-select
        show-search
        :filter-option="filterOption"
        :options="ywlx"
        allowClear
        placeholder="请选择"
        style="width: 100%"
        v-model:value="formData.receiptType"
      />
    </a-form-item>
    <!-- 流程名称表单项 -->
    <a-form-item label="流程说明">
      <a-textarea
        v-model:value="formData.description"
        placeholder="请输入"
        :auto-size="{ minRows: 2, maxRows: 5 }"
        allowClear
      />
    </a-form-item>
    <!-- 表单key -->
    <!-- <a-form-item
      label="表单Key"
      name="fromKey"
      :rules="[ { required: false } ]"
    >
      <a-input allowClear placeholder="请输入" v-model:value.trim="formData.fromKey" />
    </a-form-item> -->

    <!-- 扩展属性组件 -->
    <!-- <a-form-item label="扩展属性">
      <Properties
        :bpmnElementId="bpmnElementId"
        :users="users"
        :roles="roles"
        :groups="groups"
        :categorys="categorys"
        :businessObject="businessObject"
        :type="type"
      />
    </a-form-item> -->
  </a-form>
</template>

<script setup lang="ts">
/**
 * 流程定义表单组件
 * @prop {String} bpmnElementId - BPMN元素ID
 * @prop {Array} roles - 角色列表
 * @prop {Array} users - 用户列表
 * @prop {Array} groups - 用户组列表
 * @prop {Array} categorys - 分类列表
 * @prop {Object} businessObject - BPMN业务对象
 * @prop {String} type - 流程类型
 */
import {
  reactive,
  watch,
  ref,
  watchEffect,
  inject,
  onBeforeUnmount,
} from "vue";
import { message } from "ant-design-vue";
import Properties from "./properties/index.vue";
import { useBpmnStore } from "@/stores/bpmn";
import { useDStore } from "@/hooks/DStore-hooks";
import { storeToRefs } from "pinia";

const { ywlx, filterOption } = useDStore();

const bpmnStore = useBpmnStore();
const { bpmnBase } = storeToRefs(bpmnStore);

// 注入依赖项
const updateProperties = inject("updateProperties") as any; // 属性更新方法
const _bpmnElement = inject("bpmnElement") as any; // 获取BPMN元素的方法
const bpmnElement = _bpmnElement();

// 表单引用和属性定义
const formRef = ref();
const props = defineProps({
  bpmnElementId: {
    type: String,
  },
  roles: {
    type: Array,
    required: true,
  },
  users: {
    type: Array,
    required: true,
  },
  groups: {
    type: Array,
    required: true,
  },
  categorys: {
    type: Array,
    required: true,
  },
  businessObject: Object,
  type: {
    type: String,
    default: "",
  },
}) as any;

// 响应式表单数据
const formData = reactive<any>({
  code: "", // 流程唯一标识
  name: "", // 流程显示名称
  receiptType: undefined, // 流程显示名称
  description: "", // 流程显示名称
  fromKey: "", //表单id
});

/**
 * 监听业务对象变化并更新表单数据
 * 当businessObject发生变化时同步id和name字段
 */
 const route = useRoute();
watchEffect(() => {
  if(route?.query.key) {
    Object.assign(formData, bpmnBase?.value);
  } else {
    Object.assign(formData, { code: props.businessObject.id })
  }

  // console.log(props.businessObject);
  // console.log(props.businessObject);
  // formData.code = props.businessObject.id;
  // formData.name = props.businessObject.name;
  // formData.fromKey = props.businessObject.fromKey;
});

/**
 * 监听流程名称变化
 * @param {String} val - 新的流程名称
 * 更新BPMN元素属性时会自动触发流程更新
 */
watch(
  () => formData,
  (val) => {
    if (val) {
      bpmnStore.$patch({ bpmnBase: formData });
      console.log(bpmnStore, formData);
    }
  },
  { deep: true }
);
// watch(
//   () => formData.name,
//   (val) => {
//     updateProperties(bpmnElement, { name: val });
//   }
// );
// watch(
//   () => formData.fromKey,
//   (val) => {
//     console.log("表单key变化");
//     updateProperties(bpmnElement, { fromKey: val });
//   }
// );

onMounted(() => {
  // Object.assign(formData,bpmnBase.value)
});

/**
 * 组件卸载前的生命周期钩子
 * 执行最后一次表单验证，确保数据完整性
 */
onBeforeUnmount(() => {
  // bpmnStore.$patch({ bpmnBase: {} })
  formRef.value
    .validate()
    .then(async () => {
      console.log("验证成功");
    })
    .catch((error: any) => {
      // message.error("有必选或者必填字段没有选择或填写！");
      console.log("error", error);
    });
});
</script>

<style lang="scss" scoped></style>
